<template>
  <div>
    <button @click="isShow = !isShow">切换</button>
    <!-- 使用transition组件包含被条件渲染的元素，控制其执行动画 -->
    <transition name="box1">
      <div class="box" v-if="isShow"></div>
    </transition>
    <br />
    <transition name="box2">
      <div class="box" v-show="isShow"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: red;
}
/* 
  控制元素进入之前和进入之后的样式
*/
.box1-enter,
.box1-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}

/* 
  控制元素离开之前和离开之后的样式
*/
.box1-enter-to,
.box1-leave {
  opacity: 1;
  transform: translateX(0px);
}

/* 控制过程的过渡动画 */
.box1-enter-active,
.box1-leave-active {
  transition: all 0.1s linear;
}

.box2-enter,
.box2-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

/* 
  控制元素离开之前和离开之后的样式
*/
.box2-enter-to,
.box2-leave {
  opacity: 1;
  transform: translateX(0px);
}

/* 控制过程的过渡动画 */
.box2-enter-active,
.box2-leave-active {
  transition: all 0.1s linear;
}
</style>
